<template>
	<view
		:style="{'height':'44px','background-color':'#2758E6','overflow':'hidden','position':'relative','display':'flex','flex-direction':'column','padding-top':statusbarHeight+'px'}">
		<image src="/static/nice_bg.png" style="position: absolute;left: 0;top: 0;width: 100%;" v-if="!isnormal">
		</image>
		<!-- normal -->
		<view v-if="isnormal"
			style="flex: 1;background-color: #2758E6;z-index: 999;display: flex;align-items: center;padding-left: 20px;padding-right: 20px;">
			<image v-if="idx == 0" src="/static/back_btn_w.png" mode="aspectFit" class="back-ico" @click="backHandle">
			</image>
			<view class="title">
				{{title}}
			</view>
			<view class="ico"></view>
		</view>
		<!-- nice -->
		<view v-else
			style="flex: 1;z-index: 999;display: flex;align-items: center;padding-left: 20px;padding-right: 20px;">
			<image v-if="idx == 0" src="/static/back_btn_b.png" mode="aspectFit" class="back-ico" @click="backHandle">
			</image>
			<view class="title title2">
				{{title}}
			</view>
			<view class="ico"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "BaseNavBar",
		props: {
			'idx': {
				default: 0,
			},
			"isnormal": {
				default: true
			},
			"title": {
				default: ""
			}
		},
		data() {
			return {
				statusbarHeight: 0
			};
		},
		mounted() {
			this.statusbarHeight = getApp().globalData.statusBarHeight;
		},
		methods: {
			backHandle() {
				uni.navigateBack();
			}
		}
	}
</script>

<style>
.title{
	color: white;
	flex: 1;
	text-align: center;
	font-size: 16px;
}
.title2{
	color: black;
}
.ico,.back-ico{
	width: 20px;
	height: 20px;
}
</style>
